<template>
  <div class="flex justify-between p-12 items-center">
    <div>
      <p>您好</p>
      <h2 class="text-6xl mt-8">万峰互联科技</h2>
    </div>
    <i class="iconfont icon-a-001_tongzhi text-gray-400 text-9xl"></i>
  </div>
  <div class="p-12">
    <c-input icon="icon-a-001_sousuo" placeholder="请输入心仪的岗位进行搜索" />
  </div>
  <van-swipe class="m-12" :autoplay="3000" indicator-color="white">
    <van-swipe-item>
      <img class="w-full" src="../assets/img/1.png" alt="" srcset="" />
    </van-swipe-item>
    <van-swipe-item>
      <img class="w-full" src="../assets/img/2.png" alt="" srcset="" />
    </van-swipe-item>
  </van-swipe>
  <van-grid>
    <van-grid-item
      v-for="value in cateList"
      :key="value.objectId"
      icon="photo-o"
      :text="value.name"
    />
    <van-grid-item icon="newspaper-o" text="更多" />
  </van-grid>
  <div class="flex justify-between p-12">
    <h3>为你推荐</h3>
    <span class="text-yellow-500">查看更多</span>
  </div>
  <div class="wrapper" ref="wrap">
    <div
      class="job-list flex justify-between"
      :style="{ width: `${contWidth}rem` }"
      ref="cont"
    >
      <job-item v-for="item in jobList" :jdata="item" />
    </div>
  </div>
  <div class="line">
    <div class="dot" :style="{ transform: `translateX(${move}px)` }"></div>
  </div>
</template>

<script setup lang="ts">
import { computed, nextTick, ref } from "vue";
import { categoryGet, jobGet } from "../api/job";
import { JobType } from "../types/job";
//加载分类
interface CategoryType {
  objectId: string;
  name: string;
}
const cateList = ref<Array<CategoryType>>([]);
categoryGet().then((res) => {
  cateList.value = res.data.results;
});

// 横向滚动交互
import BScroll from "@better-scroll/core";
const wrap = ref(); //容器DOM
const cont = ref(); //内容DOM
const jobList = ref<Array<JobType>>([]);
const contWidth = computed(() => jobList.value.length * 35);
const move = ref<number>(0); //指示器的实时滚动距离
jobGet().then((res) => {
  jobList.value = res.data.results; //渲染真实DOM
  nextTick(() => {
    let wrapWith = wrap.value.offsetWidth;
    let contWidth = cont.value.offsetWidth;
    // console.log(wrapWith, contWidth);
    let sMax = contWidth - wrapWith; //滚动的最大距离

    const bs = new BScroll(wrap.value, {
      // ...... 详见配置项
      scrollX: true, //开启横向滚动
      probeType: 3, //实时派发scroll事件
      click: true, //启用点击
    });
    bs.on("scroll", (position: { x: number; y: number }) => {
      // console.log(position.x, position.y);
      move.value = -(position.x / sMax) * 80;
    });
  });
});
</script>

<style scoped>
.wrapper {
  width: 100%;
  overflow: hidden;
}
.job-list {
  /* display: flex; */
  /* flex-wrap: wrap; */
  padding: 1.9rem;
  /* justify-content: space-between; */
  /* width: 100%; */
  overflow-x: scroll;
}
.line {
  height: 6px;
  width: 100px;
  background-color: #333;
  margin: auto;
  overflow: hidden;
}
.line .dot {
  height: 6px;
  width: 20px;
  background-color: orange;
}
</style>
